import React from 'react';
import { Popover } from 'antd';
import { SketchPicker } from 'react-color';
import cls from 'classnames';
import './styles.less';

export const ColorPicker: React.FC<any> = (props) => {
  const onColorChange = ({ rgb }: any) => {
    let rgbColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
    props?.onChange(rgbColor);
  };

  return (
    <Popover
      trigger={'click'}
      autoAdjustOverflow
      overlayInnerStyle={{ padding: 0 }}
      placement="leftTop"
      content={<SketchPicker onChange={onColorChange} color={props?.value} />}
    >
      <div className={cls('design-collapse-color')}>
        <div
          style={{
            width: '100%',
            height: '100%',
            background: props?.value ?? '#fff',
          }}
        ></div>
      </div>
    </Popover>
  );
};
